<template>
    <div class="common-layout">
        <el-container>
          <el-header>
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item label="ID">
                    <el-input
                        v-model="queryParams.dataTypeID"
                        placeholder="请输入ID"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="类型名称">
                    <el-input
                        v-model="queryParams.dataTypeName"
                        placeholder="请输入类型名称"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="基础类型">
                    <el-input
                        v-model="queryParams.baseType"
                        placeholder="请输入基础类型"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="长度">
                    <el-input
                        v-model="queryParams.baseLength"
                        placeholder="请输入长度"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="小数">
                    <el-input
                        v-model="queryParams.basePrecision"
                        placeholder="请输入小数"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="默认值">
                    <el-input
                        v-model="queryParams.defaultValue"
                        placeholder="请输入默认值"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="匹配">
                    <el-input
                        v-model="queryParams.matchPattern"
                        placeholder="请输入匹配"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="备注">
                    <el-input
                        v-model="queryParams.memo"
                        placeholder="请输入备注"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="">
                    <el-input
                        v-model="queryParams.createUser"
                        placeholder="请输入"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>    
                  <el-form-item label="">
                    <el-date-picker
                        clearable size="default" style="width: 200px"
                        v-model="queryParams.createTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择">
                    </el-date-picker>
                  </el-form-item>    
                  <el-form-item label="启用">
                    <el-input
                        v-model="queryParams.iSActive"
                        placeholder="请输入启用"
                        clearable
                        size="default"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" :icon="Search" size="small" @click="handleQuery">搜索</el-button>
                    <el-button :icon="RefreshLeft" size="small" @click="resetQuery">重置</el-button>
                  </el-form-item>
            </el-form>
          </el-header>
          <el-main>
            <el-row>
              <el-col style="margin-bottom: 10px;" :span="24">
                <el-button type="primary" icon="Plus" size="small" @click="handleAdd">新增</el-button>
                <el-button type="success" icon="Edit" size="small" :disabled="single" @click="handleUpdate">修改</el-button>
                <el-button type="danger" icon="Delete" size="small" :disabled="multiple" @click="handleDelete">删除</el-button>
              </el-col>
              <el-col :span="24">
                <el-table v-loading="loading" :data="lkDatatypeList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />      
                    <el-table-column label="ID" align="center" prop="dataTypeID" />      
                    <el-table-column label="类型名称" align="center" prop="dataTypeName" />      
                    <el-table-column label="基础类型" align="center" prop="baseType" />      
                    <el-table-column label="长度" align="center" prop="baseLength" />      
                    <el-table-column label="小数" align="center" prop="basePrecision" />      
                    <el-table-column label="默认值" align="center" prop="defaultValue" />      
                    <el-table-column label="匹配" align="center" prop="matchPattern" />      
                    <el-table-column label="备注" align="center" prop="memo" />      
                    <el-table-column label="" align="center" prop="createUser" />      
                    <el-table-column label="" align="center" prop="createTime" width="180"></el-table-column>      
                    <el-table-column label="启用" align="center" prop="iSActive" />      
                    <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
                      <template #default="scope">
                        <el-button
                          size="small"
                          icon="el-icon-edit"
                          @click="handleUpdate(scope.row)"
                        >修改</el-button>
                        <el-button
                          size="small"
                          icon="el-icon-delete"
                          @click="handleDelete(scope.row)"
                        >删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
            <el-form ref="formtry" :model="form" size="small" :rules="rules" label-width="80px">      
            <el-form-item label="类型名称" prop="dataTypeName">
                 <el-input v-model="form.dataTypeName" placeholder="请输入类型名称" />
            </el-form-item>      
            <el-form-item label="基础类型" prop="baseType">
                 <el-input v-model="form.baseType" placeholder="请输入基础类型" />
            </el-form-item>      
            <el-form-item label="长度" prop="baseLength">
                 <el-input v-model="form.baseLength" placeholder="请输入长度" />
            </el-form-item>      
            <el-form-item label="小数" prop="basePrecision">
                 <el-input v-model="form.basePrecision" placeholder="请输入小数" />
            </el-form-item>      
            <el-form-item label="默认值" prop="defaultValue">
                 <el-input v-model="form.defaultValue" placeholder="请输入默认值" />
            </el-form-item>      
            <el-form-item label="匹配" prop="matchPattern">
                 <el-input v-model="form.matchPattern" placeholder="请输入匹配" />
            </el-form-item>      
            <el-form-item label="备注" prop="memo">
                 <el-input v-model="form.memo" placeholder="请输入备注" />
            </el-form-item>      
            <el-form-item label="" prop="createUser">
                 <el-input v-model="form.createUser" placeholder="请输入" />
            </el-form-item>      
             <el-form-item label="" prop="createTime">
                 <el-date-picker clearable style="width: 200px"
                     v-model="form.createTime"
                     type="date"
                     value-format="yyyy-MM-dd"
                     placeholder="选择">
                 </el-date-picker>
             </el-form-item>      
            <el-form-item label="启用" prop="iSActive">
                 <el-input v-model="form.iSActive" placeholder="请输入启用" />
            </el-form-item>       
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
    </div>
</template>

<script>
import {ref,reactive,toRefs,onBeforeMount} from "vue"
import {listLkDatatype,getLkDatatype,delLkDatatype,addLkDatatype,updateLkDatatype} from "/@/api/linkoo/dataType";
import {RefreshLeft,Search} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    setup(props) {
        let state = reactive({
             // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 数据类型表格数据
            lkDatatypeList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,      
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                dataTypeID: undefined,
                dataTypeName: undefined,
                baseType: undefined,
                baseLength: undefined,
                basePrecision: undefined,
                defaultValue: undefined,
                matchPattern: undefined,
                memo: undefined,
                createUser: undefined,
                createTime: undefined,
                iSActive: undefined,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: { 
            }
        })
        onBeforeMount(()=>{
            getList();
        })
        const getList=()=>{
            state.loading = true;
            listLkDatatype(state.queryParams).then(response => {
                console.log(response);
                state.lkDatatypeList = response.data.list;
                state.total = response.data.total;
                state.loading = false;
            });
        }
        const resetQuery=()=> {
            handleQuery();
        }
        const handleQuery=() =>{
            state.queryParams.pageNum = 1;
            getList();
        }
        const handleUpdate = (row)=>{
            reset();
            const dataTypeID = row.dataTypeID || state.ids
            getLkDatatype(dataTypeID).then(response => {
                let data = response.data;        
                state.form = data;
                state.open = true;
                state.title = "修改数据类型";
            });
        }
        const handleSelectionChange=(selection) =>{
            state.ids = selection.map(item => item.dataTypeID)
            state.single = selection.length!=1
            state.multiple = !selection.length
        }
        const handleDelete=(row)=> {
            const dataTypeIDs = row.dataTypeID || state.ids;
            ElMessageBox.confirm(
                '是否确认删除数据类型编号为"' + dataTypeIDs + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(function() {
                return delLkDatatype(dataTypeIDs);
                }).then(() => {
                    getList();
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }).catch(function() {});
        }
        const handleAdd=()=> {
            reset();
            state.open = true;
            state.title = "添加数据类型";
        }
        const reset =()=> {
            state.form = {        
                dataTypeID: undefined,        
                dataTypeName: undefined,        
                baseType: undefined,        
                baseLength: undefined,        
                basePrecision: undefined,        
                defaultValue: undefined,        
                matchPattern: undefined,        
                memo: undefined,        
                createUser: undefined,        
                createTime: undefined,        
                iSActive: undefined,        
            };
        }
        const cancel=()=> {
            state.open = false;
            reset();
        }
        let formtry = ref(null)
        const submitForm=()=> {
            formtry.value.validate(valid => {
                if (valid) {
                if (state.form.dataTypeID != undefined) {
                    updateLkDatatype(state.form).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        state.open = false;
                        getList();
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    });
                } else {
                    addLkDatatype(state.form).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: '新增成功',
                        })
                        state.open = false;
                        getList();
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    });
                }
                }
            });
        }
        return{
            RefreshLeft,
            Search,
            formtry,
            ...toRefs(state),
            getList,
            resetQuery,
            handleQuery,
            handleUpdate,
            handleSelectionChange,
            handleDelete,
            handleAdd,
            reset,
            cancel,
            submitForm
        }
    }
}
</script>

<style scoped>
 .el-header,.el-main{
    margin: 0;padding: 0;
}
.el-header{
    height: auto;
    padding-bottom: 10px;
}
</style>